<template>
  <div class="forum-list-wrap">
    <div class="banner">
      <el-carousel height="5.5rem">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <div class="banner-img" @click="clickBannerFun(item)">
            <img :src="item.image" alt="" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="m-cagegory">
      <div class="m-tab">
        <div
          class="m-tab-item"
          :class="{ 'm-tab-item--active': tabCurrent == index }"
          @click="selectTabFun(item, index, $event)"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="push" @click="pushFun">发布</div>
    </div>

    <div class="list">
      <ForumItem
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        @comment="commentFun"
        @zan="zanFun"
      ></ForumItem>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="paginationFun"
      >
      </el-pagination>
    </div>

    <ForumComment ref="ForumComment" @submit="getForumListFun"></ForumComment>
    <ForumPush ref="ForumPush"></ForumPush>
  </div>
</template>

<script>
import _cache from "@/utils/cache.js";

import ForumItem from "./pageComponents/forum-item.vue";
import ForumComment from "./pageComponents/forum-comment.vue";
import ForumPush from "./pageComponents/forum-push.vue";

import { mustLogin } from "@/utils/utils";
import { getForumType, getForumList, addLikeForum } from "@/api/forum";
import { getBanner } from "@/api/common";
export default {
  components: {
    ForumItem,
    ForumPush,
    ForumComment,
  },
  data() {
    return {
      bannerList: [],
      tabList: [],
      tabCurrent: 0,
      total: 0,
      parmas: {
        page: 1,
        limit: 10,
        category_id: 0,
        is_my: 0,
      },
      list: [],
    };
  },
  mounted() {
    this.getBannerFun();
    this.getForumTypeFun();
    this.getForumListFun();
  },
  methods: {
    getBannerFun() {
      getBanner({
        position: 6
      }).then((res) => {
        this.bannerList = res.data;
      });
    },
    clickBannerFun(item) {
      if (item.url) {
        window.location.href = item.url;
      }
    },
    selectTabFun(item, index, event) {
      this.tabCurrent = index;
      // 计算当前按钮的位置，看是否需要移动
      const spanLeft = event.clientX; // 当前点击的元素左边距离
      const divBox = document.querySelector(".m-tab-item").clientWidth / 2; // 点击的元素一半宽度
      const totalWidths = document.body.clientWidth; // 屏幕总宽度
      const widths = totalWidths / 2; // 一半的屏幕宽度
      const spanRight = totalWidths - spanLeft; // 元素的右边距离
      const scrollBox = document.querySelector(".m-tab"); // 获取最外层的元素
      const scrollL = scrollBox.scrollLeft; // 滚动条滚动的距离
      // 当元素左边距离 或者 右边距离小于100时进行滑动
      scrollBox.scrollLeft = scrollL + (spanLeft - widths) + divBox;

      this.parmas.category_id = item.id;
      this.parmas.page = 1;
      this.getForumListFun();
    },
    pushFun() {
      mustLogin.call(this, () => {
        this.$refs.ForumPush.open();
      });
    },
    commentFun(item) {
      let token = _cache.get("token");
      console.warn("token", token);
      if (!token) {
        this.$confirm("请您登录后进行评论操作,是否去登录？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      } else {
        this.$refs.ForumComment.open({
          f_id: item.id,
          c_id: 0,
        });
      }
    },
    paginationFun(e) {
      this.parmas.page = e;
      this.getForumListFun();
    },
    getForumTypeFun() {
      getForumType().then((res) => {
        if (res.code == 200) {
          let data = res.data;
          data.unshift({ id: 0, title: "全部" });
          this.tabList = data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getForumListFun() {
      getForumList(this.parmas).then((res) => {
        if (res.code == 200) {
          let { count, list } = res.data;
          this.total = count;
          this.list = list;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getForumCommentFun(id, type) {
      getForumComment(id, type).then((res) => {
        if (res.code == 200) {
          this.forumComment = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    zanFun(item) {
      let token = _cache.get("token");
      console.warn("token", token);

      if (!token) {
        this.$confirm("请您登录后进行点赞操作,是否去登录？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      } else {
        mustLogin.call(this, () => {
          addLikeForum({ id: item.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.getForumListFun();
            }
          });
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.forum-list-wrap {
  .banner {
    width: 100%;
    height: 5.5rem;
    .banner-img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .m-cagegory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 1rem;
    background: rgba(79, 138, 248, 0.1);
    margin-top: 0.4rem;
    box-sizing: border-box;
    padding: 0 0.5rem 0 0;
    .push {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 0.5rem;
      background: #4f8af8;
      border-radius: 0.1rem;
      font-size: 0.2rem;
      color: #fff;
      cursor: pointer;
      user-select: none;
    }
    .m-tab {
      display: flex;
      width: 15rem;
      height: 100%;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      scroll-duration: 1s;
      &::before {
        content: "";
        display: block;
        width: 0.125rem;
        height: 100%;
      }
      &::-webkit-scrollbar {
        height: 0;
        border-radius: 0.025rem;
        background: rgba(0, 0, 0, 0.1);
      }
      &::-webkit-scrollbar-thumb {
        background: #4f8af8;
      }
      .m-tab-item {
        display: flex;
        align-items: center;
        padding: 0 0.375rem;
        font-size: 0.3rem;
        color: #333;
        flex-shrink: 0;
        height: 100%;
        cursor: pointer;
        user-select: none;
      }
      .m-tab-item--active {
        font-weight: 800;
      }
    }
  }

  .list {
    padding-top: 0.5rem;
  }
  .pagination {
    display: flex;
    justify-content: center;
    padding: 0.375rem 0 1rem;
  }
}
</style>
